<template>
  <div>
    <!-- 这里是 【账户 资料 管理】[account-data-manage]
    <el-button @click="getUserData">获取用户信息</el-button> -->
    <div style='height:10px'></div>
    <div class="user_data_header">
      <div v-show="showSign === 0">
        <div class="span"><span>个人信息</span></div>
      </div>
      <div v-show="showSign !== 0">
        <el-page-header @back="goBack" :content="pageHeaderContent" ></el-page-header>
      </div>
    </div>
    

    <div class="user_data_wide_body" v-show="showSign === 0">
      <div class="user_data_narrow_body">
        <div class="user_data_item_box">
          <div class="left"><div><span>uid:</span></div></div>
          <div class="right"><div class="span"><span>{{userData.uid}}</span></div></div>
        </div>
        <div class="user_data_item_box">
          <div class="left"><div><span>学号:</span></div></div>
          <div class="right"><div class="span"><span>{{userData.stuid}}</span></div></div>
        </div>
        <div class="user_data_item_box">
          <div class="left"><div><span>密码:</span></div></div>
          <!-- <div class="right"><span>{{userData.password}}</span></div> -->
          <div class="right"><div class="circle"><el-button icon="el-icon-edit" circle @click="changePassword"></el-button></div></div>
        </div>
        <div class="user_data_item_box">
          <div class="left"><div><span>头像:</span></div></div>
          <div class="right"><div class="circle" title="修改头像" @click="changePortrait"><el-avatar :src='userData.portrait' ></el-avatar></div></div>
        </div>
        <div class="user_data_item_box">
          <div class="left"><div><span>昵称:</span></div></div>
          <div class="right">
            <div class="span" v-show="changeNN === 0"><span>{{userData.nickName}}</span></div>
            <div v-show="changeNN === 0" class="circle"><el-button type="primary" icon="el-icon-edit" circle @click="changeNickName"></el-button></div>
            <div v-if="changeNN === 1" class="input"><el-input v-model="userData.nickName"></el-input></div>
            <div v-if="changeNN === 1" class="circle"><el-button type="success" icon="el-icon-check" circle @click="saveNickName"></el-button></div>
          </div>
        </div>
      </div>
    </div>
    <account-data-password v-if="showSign === 1"></account-data-password>
    <account-data-portrait v-if="showSign === 2" :getUserData='getUserData'></account-data-portrait>
  </div>
</template>

<script>
import AccountDataPassword from './account-data-password'
import AccountDataPortrait from './account-data-portrait'
export default {
  components: {
    AccountDataPassword,
    AccountDataPortrait
  },
  mounted() {
    this.getUserData()
  },
  data() {
    return {
      showSign: 0,
      changeNN:0,
      pageHeaderContent:'',
      userData:{
        uid:1,
        stuid:"171110531",
        password:"******",
        nickName:'老张1',
        portrait:'',
      }
    }
  },
  methods: {
    // 获取用户信息
    getUserData(){
      // return;
      this.$http1({
        url: this.$http.adornUrl("/user/login/user/info"),
        method: "post",
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "获取用户信息成功!",
        });
        this.userData = data.user;
      });
    },
    // 修改密码界面
    changePassword(){
      this.pageHeaderContent = '修改密码'
      this.showSign = 1
      console.log("修改密码")
    },
    // 修改头像界面
    changePortrait(){
      this.pageHeaderContent = '修改头像'
      this.showSign = 2
      console.log("修改头像")
    },
    // 修改昵称
    changeNickName(){
      this.changeNN = 1;
    },
    // 保存昵称，发送请求
    saveNickName(){
      var data = {
        uid: this.userData.uid,
        nickName: this.userData.nickName,
      }
      console.log("修改昵称，发送请求", data)
      // return;
      this.$http({
        url: this.$http.adornUrl("/user/login/user/update"),
        method: "post",
        data: this.$http.adornData(data, false)
      }).then(({ data }) => {
        if(data && data.code === 0){
          this.$message({
            type: "success",
            message: "修改昵称成功!",
          });
          this.currentUser.user.nickName = this.userData.nickName
          this.changeNN = 0;
        }
      });
    },
    // 返回
    goBack(){
      this.showSign = 0
    }
  },
}
</script>

<style>
.user_data_header .span{
  line-height: 24px;
  font-size:  18px;
}
.user_data_wide_body{
  /* background: #924eff; */
}
.user_data_narrow_body{
  /* background: #8848ff; */
  width: 90%;
  margin: 0 auto;
}

.user_data_item_box{
  /* background: #752bff; */
  display: flex;
  height: 50px;
  margin-top: 10px;
}
.user_data_item_box .left{
  width: 300px;
  text-align: right; /* 靠右 */
  margin-right: 20px;
  font-size: 18px;
  margin-top: 15px;
}
.user_data_item_box .right{
  display: flex;
}
.user_data_item_box .right .span{
  font-size: 16px;
  margin-top: 16px;
}
.user_data_item_box .right .circle{
  cursor: pointer;
  margin-top: 5px;
  margin-left: 3px;
}
.user_data_item_box .right .input{
  margin-top: 7px;
  width: 150px;
}

</style>